.list-item {
  position: relative;
  padding: var(--cui-spacings-kilo) var(--cui-spacings-tera)
    var(--cui-spacings-kilo) var(--cui-spacings-mega);
  color: var(--cui-fg-normal);
  text-decoration: none;
  background-color: var(--cui-bg-normal);
  border: 0;
}

.list-item:hover {
  cursor: pointer;
  background-color: var(--cui-bg-normal-hovered);
}

.list-item:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--cui-border-focus);
}

.list-item:focus::-moz-focus-inner {
  border: 0;
}

.list-item:focus:not(:focus-visible) {
  box-shadow: none;
}

.list-item:active {
  background-color: var(--cui-bg-normal-pressed);
}

.list-item:disabled,
.list-item[disabled] {
  color: var(--cui-fg-normal-disabled);
  pointer-events: none;
  background-color: var(--cui-bg-normal-disabled);
}

.list-item-destructive {
  color: var(--cui-fg-danger);
}

.list-item-destructive:disabled,
.list-item-destructive[disabled] {
  color: var(--cui-fg-danger-disabled);
  pointer-events: none;
  background-color: var(--cui-bg-normal-disabled);
}

.navigation-item {
  display: flex;
  align-items: center;
  color: var(--cui-fg-normal);
  text-align: left;
  cursor: pointer;
  outline: none;
  background-color: var(--cui-bg-normal);
  border: none;
  transition:
    color var(--cui-transitions-default),
    background-color var(--cui-transitions-default);
}

.navigation-item:hover {
  color: var(--cui-fg-normal-hovered);
  background-color: var(--cui-bg-normal-hovered);
}

.navigation-item:active {
  color: var(--cui-fg-normal-pressed);
  background-color: var(--cui-bg-normal-pressed);
}

.navigation-item:disabled,
.navigation-item[disabled] {
  color: var(--cui-fg-normal-disabled);
  pointer-events: none;
  background-color: var(--cui-bg-normal-disabled);
}

.navigation-item[aria-expanded="true"],
.navigation-item[aria-current="page"] {
  color: var(--cui-fg-accent);
  background-color: var(--cui-bg-accent);
}

.navigation-item[aria-expanded="true"]:hover,
.navigation-item[aria-current="page"]:hover {
  color: var(--cui-fg-accent-hovered);
  background-color: var(--cui-bg-accent-hovered);
}

.navigation-item[aria-expanded="true"]:active,
.navigation-item[aria-current="page"]:active {
  color: var(--cui-fg-accent-pressed);
  background-color: var(--cui-bg-accent-pressed);
}

.navigation-item[aria-expanded="true"]:disabled,
.navigation-item[aria-expanded="true"][disabled],
.navigation-item[aria-current="page"]:disabled,
.navigation-item[aria-current="page"][disabled] {
  color: var(--cui-fg-accent-disabled);
  background-color: var(--cui-bg-accent-disabled);
}

.animation-fade-in {
  animation: fade-in var(--dialog-animation-duration) forwards;
}

.animation-fade-out {
  animation: fade-out var(--dialog-animation-duration) forwards;
}

.animation-slide-up-in {
  animation: slide-up-in var(--dialog-animation-duration) forwards;
}

.animation-slide-up-out {
  animation: slide-up-out var(--dialog-animation-duration) forwards;
}

.animation-slide-down-in {
  animation: slide-down-in var(--dialog-animation-duration) forwards;
}

.animation-slide-down-out {
  animation: slide-down-out var(--dialog-animation-duration) forwards;
}

.animation-slide-left-in {
  animation: slide-left-in var(--dialog-animation-duration) forwards;
}

.animation-slide-left-out {
  animation: slide-left-out var(--dialog-animation-duration) forwards;
}

.animation-slide-right-in {
  animation: slide-right-in var(--dialog-animation-duration) forwards;
}

.animation-slide-right-out {
  animation: slide-right-out var(--dialog-animation-duration) forwards;
}

/* Animations */

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes slide-up-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-up-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes slide-down-in {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-down-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes slide-left-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-left-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-right-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-right-out {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}
